<template>
    <div class="hospital">
        <h3>{{hospitals.title}}</h3>
        <ul>
            <li v-for="item in hospitals.list"
                @mouseenter="item.show=false"
                @mouseleave="item.show=true">
                <img :src="item.img">
                <transition name="el-zoom-in-bottom">
                    <div class="hospital_name"
                         v-show="item.show">
                        <p>{{item.name}}</p>
                    </div>
                </transition>
                <transition name="el-zoom-in-top">
                    <div class="hospital_content"
                         v-show="item.show==false">
                        <h3>{{item.place}}</h3>
                        <p>{{item.description}}</p>
                    </div>
                </transition>
            </li>
        </ul>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    computed: {
        ...mapGetters([
            'hospitals'
        ])
    },
    mounted() {
        this.$nextTick(() => {
            setTimeout(() => {
                this.hospitals.list.forEach((value) => {
                    if (value.show == undefined || value.show == null) {
                        this.$set(value, 'show', true);
                    }
                })
            }, 100)

        })
    },
    created() {
        this.$store.dispatch('getHospitalList')
    },
    data() {
        return {
        }
    }
}
</script>

<style lang="less">
.hospital {
    h3 {
        color: #1169b8;
        font-size: 16px;
    }
    ul li {
        display: inline;
        float: left;
        width: 320px;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        &:hover {
            cursor: pointer;
        }
        .hospital_name {
            position: absolute;
            bottom: 0px;
            width: 100%;
            text-align: center;
            height: 30px;
            padding: 5px 0 5px 0;
            line-height: 30px;
            background-color: rgba(55, 86, 133, .8);
            p {
                margin: 0;
                color: #fff;
            }
        }
        .hospital_content {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(55, 86, 133, .8);
            top: 0;
            text-align: center;
            h3 {
                color: #fff;
                font-weight: normal;
            }
            p {
                color: #fff;
                font-size: 14px;
                margin: 0 10px;
                text-align: left;
                line-height: 1.5;
            }
        }
    }
}
</style>